<template lang="pug">
.tab-student(:class="{active: isFixed}")
  .students(v-for="(item, index) in studentArr"
   :key="index"
   @click="tabStudent(index)"
    :class="{active: index === activeIndex}")
    .student-img
      img(:src="item.url" v-if="!isFixed")
      img(src="https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp" v-else)
    .student-name(v-if="!isFixed") {{item.name}}
    .student-name(v-if="isFixed") {{item}}
    .student-age(v-if="!isFixed") {{item.age}}
  i.el-icon-circle-plus-outline(v-if="isAddStudent" @click="addStudent")
</template>
<script>

export default {

  props: {
    studentArr: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    },
    isFixed: { // 是否固定
      type: Boolean,
      default: false
    },
    isAddStudent: { // 是否可以添加对象
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  methods: {
    tabStudent (index) {
      this.activeIndex = index
      this.$emit('tabStudent', index)
    },
    addStudent () {
      this.$emit('addStudent')
    }
  }
}
</script>
<style lang="scss">
.tab-student {
    display: flex;
    &.active {
        position: fixed;
        z-index: 1000;
        width: 100%;
        background: #fff;
    }
    margin-bottom: 15px;
    .el-icon-circle-plus-outline {
        font-size: 65px;
        color: #666;
    }
    .students {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        margin-right: 20px;
        position: relative;
        cursor: pointer;
        &.active::after {
            content: "";
            width: 50px;
            display: block;
            position: absolute;
            bottom: -8px;
            left: 50%;
            margin-left: -25px;
            right: 0;
            height: 4px;
            background: #AACD22;
        }

        // border-bottom: 4px solid #AACD22;
        .student-img {
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 50%;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .student-name {
            font-weight: bold;
            margin-top: 5px;
        }
    }

}
</style>
